// pages/weekReportPage/weekReportPage.js
const app = getApp()
import * as echarts from "../../components/ec-canvas/echarts.min"

function setoption(chart) {
  const value = [7, 6, 8, 1, 25]
  const array=['粑粑次数（次）','粑粑天数（天）','粑粑量（）','粑粑排名（名）','粑粑时长（分钟）']
  const option = {
    radar: {
      radius: 100,
      center: ['50%', '55%'], // 调整雷达图的位置，默认居中
      axisLine: {
        lineStyle: {
          color: '#E5E6FA', // 中心点与顶点相连的分割线颜色
          width: 2,
          type:'dashed'
        }
      },
      axisName: {
        show: true,
        color: '#A3A3A3',
        formatter: function (params, data) {
          const index = array.indexOf(data.name);
          return `{name|${params}}\n{value|${value[index]}}`;
        },
        rich: {
          name: {
            fontSize: 12, // 自定义数据名的字体大小
            color: '#999999', // 自定义数据名的颜色
            align: 'left', // 自定义数据名的对齐方式
  
          },
          value: {
            color: '#5F40DC',
            fontWeight: 1000,
            fontSize: 20,
            padding: [5, 0]
          }
        }
      },
      splitNumber: 4, // 雷达图圈数设置
      splitLine: {
        lineStyle: {
          color: ['#E5E6FA', '#E5E6FA', '#E5E5FD','#E5E5FD'],
          width: 2,
          type:'dashed'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['#FFFFFF', '#FFFFFF', '#F4F2FF','#F4F2FF'], // 自定义区域背景颜色
        }
      },
      indicator: [
        { name: '粑粑次数（次）', max: 25 },
        { name: '粑粑天数（天）', max: 7 },
        { name: '粑粑量（）', max: 30 },
        { name: '粑粑排名（名）', max: 7 },
        { name: '粑粑时长（分钟）', max: 60 }
      ],

    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: value,
            name: 'Allocated Budget',
            symbol: 'circle', // 标点形状
            symbolSize: 0, // 标点大小
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1,0, [
                { offset: 0, color: '#62E1D6' },
                { offset: 0.5, color: '#9689FB' },
                { offset: 0.75, color: '#FB9DAD' },
                { offset: 1, color: '#FBBB8F' },         
              ]),
              width: 7
            },           
          }
        ]
      }
    ]
  };
  chart.setOption(option)
}


Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl: '',
    ec:{},
    ecPie: {},
    ecColorPie: {},
  },

  getAvatarUrl() {
    const avatarUrl = wx.getStorageSync('avatarUrl')
    this.setData({
      avatarUrl: avatarUrl
    })
  },
  
  init_echart() {
    this.Component = this.selectComponent('#mychart-one');
    this.Component.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setoption(chart)
      this.chart = chart;
      return chart;
    });
  },

  chartOneData() {
    this.init_echart()
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getAvatarUrl()
    this.chartOneData()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})